<template>
  <div class="container coupon">
    <!-- <van-nav-bar
      title="店铺位置"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    /> -->
    <div class="view-pic">
      <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
    </div>
  </div>
</template>


<script>
import floor1 from '@/assets/map/floor1.jpg';
import floor2 from '@/assets/map/floor2.jpg';
import floor3 from '@/assets/map/floor3.jpg';
import floor4 from '@/assets/map/floor4.jpg';
// import floor1 from '@/assets/map/2x/f1@2x.jpg';
// import floor2 from '@/assets/map/2x/f2@2x.jpg';
// import floor3 from '@/assets/map/2x/f3@2x.jpg';
// import floor4 from '@/assets/map/2x/f4@2x.jpg';
// import floor1 from '@/assets/map/3x/f1@3x.jpg';
// import floor2 from '@/assets/map/3x/f2@3x.jpg';
// import floor3 from '@/assets/map/3x/f3@3x.jpg';
// import floor4 from '@/assets/map/3x/f4@3x.jpg';
export default {
  name: 'shopMap',
  data() {
    return {
      show: false,
      index: 0,
      floor:'',
      floorImage:[],
      showIndex: false,
      slide1: [
          {
            src: floor1,
            msrc: floor1,
            alt: '',
            title: '',
            w: 1200,
            h: 691
          }
        ]
    };
  },
  mounted() {
    if(this.$route.query.floor == 1){
      this.slide1[0].src = floor1;
      this.slide1[0].msrc = floor1;
    }else if(this.$route.query.floor == 2){
      this.slide1[0].src = floor2;
      this.slide1[0].msrc = floor2;
    }else if(this.$route.query.floor == 3){
      this.slide1[0].src = floor3;
      this.slide1[0].msrc = floor3;
    }else if(this.$route.query.floor == 4){
      this.slide1[0].src = floor4;
      this.slide1[0].msrc = floor4;
    }
  },
  methods: {
     onClickLeft() {
      this.$router.go(-1);
    },
    showImage(){
      this.show = true;
    },
    onChange(index) {
      this.index = index;
    },
    handleClose () {
      console.log('close event')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.coupon {
  height: 100%;
  .van-image__img {
    transform: translateZ(0);
  }
  .view-pic {
    display: flex;
    align-items: center;
    height: 100%;
    img {
      width: 100%;
    }
  }
  figure {
    margin: 0;
  }
  .coupon-list-row {
    padding: .533333rem .266667rem;
    .coupon-list {
      border: 1px solid #ddd;
      border-radius: 4px;
      background-color: #fff;
      padding: .266667rem;
      margin-bottom: .266667rem;
      .shop-pic {
        width:2.133333rem;
        height: 2.133333rem;
        border:1px solid #ddd;
        margin-right: .266667rem;
        .img {
          width:2.133333rem;
          height: 2.133333rem;
        }
      }
      .shop-info {
        margin-top: .266667rem;
        font-size: .32rem;
        color: #999;
      }
      .coupon-name {
        font-size: .426667rem;
        margin-top: .133333rem;
        color: #333;
      }
      .text {
        font-size: .32rem;
        color: #999;
      }
    }
  }
}
</style>